<template>
  <view>
    <up-navbar title="沟通" :autoBack="false" bgColor="#fd7753" :titleStyle="{color: '#fff'}">
      <template #left>
        <view></view>
      </template>
    </up-navbar>
    <view style="padding-top: 91px">
      <at-card :custom-style="{display:'flex',alignItems:'flex-start'}">
        <image src="/static/icon/home/message.png" style="width: 60rpx;height: 60rpx" mode="aspectFill"/>
        <view style="flex: 1" class="ml-10">
          <view class="flex-between">
            <view>消息中心</view>
            <view class="flex-center">
              <up-badge :isDot="true"></up-badge>
              <up-icon name="arrow-right"/>
            </view>
          </view>
          <view class="f-s-m f-c-9 flex-between mt-20">
            <view>2024-12-23</view>
            <view>系统通知</view>
          </view>
        </view>
      </at-card>
      <at-card>
        <view class="flex mb-20" v-for="item of messageListMock" :key="item.name">
          <up-avatar :text="item.name.substr(0,1)" fontSize="18" randomBgColor shape="square"></up-avatar>
          <view style="flex: 1" class="ml-20">
            <view>{{ item.name }}</view>
            <view class="f-s-m f-c-9 mt-10">{{ item.lastContent }}</view>
          </view>
          <view style="position: relative;height: 100rpx;margin-left: auto" class="flex-c-center">
            <view class="f-s-m f-c-9" style="position:absolute;top: 0;right: 0;width: 100rpx;text-align: right">
              {{ item.time }}
            </view>
            <up-icon name="arrow-right" color="#999"/>
          </view>
        </view>
      </at-card>
    </view>
  </view>
  <at-tabbar/>
</template>

<script setup lang="ts">
import {messageListMock} from "@/utils/mock";
</script>


<style scoped lang="scss">

</style>
